<template>
  <div>
    <Layout title="设置密码" ref="layout" width="200px" :fullscreen="false" :closable="false" @on-ok="lock">
     <Form slot="content">
       <Input ref="input" v-model="pwd" type="password" placeholder="锁屏密码" size="large" @keyup.enter.native="lock"></Input>
     </Form>
    </Layout>
    <Icon @click="showModal" size="24" type="md-lock" />
  </div>
</template>

<script>
import { setLocked } from '../../../../libs/util'
import Layout from '../../../layout/layout'

export default {
  name: 'lock',
  components: { Layout },
  data () {
    return {
      pwd: ''
    }
  },
  methods: {
    showModal () {
      this.$refs['layout'].show()
      this.pwd = ''
      this.$nextTick(() => {
        this.$refs['input'].focus()
      })
    },
    lock () {
      if (this.pwd === '') {
        this.$Message.error('密码不能为空')
      } else {
        this.$refs['layout'].show()
        setLocked(true, this.pwd)
        this.$router.push({ name: 'locked' })
      }
    }
  }
}
</script>

<style scoped>
  /deep/ .ivu-input:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #dcdee2;
  }
  /deep/ .ivu-input:hover {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #dcdee2;
  }

</style>
